<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
	xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/layui/css/layui.css">
<link rel="stylesheet" href="/css/custom.form.css">
</head>
<body>
	<div class="table_div">
		<input id="copy_in" style="display: none" />
		<div id="searchParam" shiro:hasPermission="sysFiles:add">
			<div class="layui-form-item">
				<div class="layui-input-inline ">
					<button type="button" class="layui-btn" id="upload">
						<i class="layui-icon">&#xe67c;</i>上传文件
					</button>
				</div>
			</div>

		</div>
		<table class="layui-table" id="showTable" lay-filter="showTable"></table>
	</div>
	<script type="text/html" id="toolbar">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="batchDeleted" shiro:hasPermission="sysFiles:delete">删除</button>
  </div>
</script>
	<script type="text/html" id="tool">
  <a class="layui-btn layui-btn-xs" lay-event="pre" shiro:hasPermission="sysFiles:list">预览</a>
  <a class="layui-btn layui-btn-xs" lay-event="copy" shiro:hasPermission="sysFiles:list">一键复制</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" shiro:hasPermission="sysFiles:delete">删除</a>
</script>

</body>
</html>
<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script>
	//获取token
	var token = CoreUtil.getData("access_token");
	//地址栏转义token中的#号
	var tokenQuery = token.replace("#", "%23");
	var tableIns1;
	var table = layui.table;
	var form = layui.form;
	var layer = layui.layer;
	var $ = jQuery = layui.jquery;
	var laydate = layui.laydate;
	var upload = layui.upload;
	
	layui.use([ 'table', 'layer', 'laydate', 'upload' ], function() {

		//加载table
		tableIns1 = table.render({
			elem : '#showTable',
			contentType : 'application/json',
			headers : {
				"authorization" : token
			},
			page : true //开启分页
			,
			url : '/sysFiles/listByPage' //数据接口
			,
			method : 'POST',
			parseData : function(res) { //将原始数据解析成 table 组件所规定的数据
				return {
					"code" : res.code, //解析接口状态
					"msg" : res.msg, //解析提示文本
					"count" : CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
					"data" : CoreUtil.isEmpty(res.data) ? null
							: res.data.records
				//解析数据列表
				}
			},
			cols : [ [ {
				type : 'checkbox',
				fixed : 'left'
			}, {
				field : 'fileName',
				title : '文件名',
				sort : true
			}, {
				field : 'createDate',
				title : '创建时间',
				sort : true
			}, {
				width : 120,
				toolbar : "#tool",
				title : '操作',
				width : 200
			} ] ],
			toolbar : '#toolbar'
		});

		//执行实例
		var uploadInst = upload.render({
			elem : '#upload' //绑定元素
			,
			url : '/sysFiles/upload?authorization=' + tokenQuery //上传接口
			,
			done : function(res) {
				search();
				//上传完毕回调
			},
			error : function() {
				//请求异常回调
			}
		});

		//表头工具
		table.on('toolbar(showTable)', function(obj) {
			switch (obj.event) {
			case 'batchDeleted':
				var checkStatus = table.checkStatus(obj.config.id);
				var data = checkStatus.data;
				if (data.length == 0) {
					layer.msg("请选择要批量删除的列");
				} else {
					var ids = [];
					$(data).each(function(index, item) {
						ids.push(item.id);
					});
					tipDialog(ids);
				}
				break;
			}
			;
		});
		//列操作
		table.on('tool(showTable)', function(obj) {
			var data = obj.data;
			switch (obj.event) {
			case 'del':
				var ids = [];
				ids.push(data.id);
				tipDialog(ids);
				break;
			case 'pre':
				//预览
				window.open(data.url, '_blank');
				break;
			case 'copy':
				var Url2 = data.url;
				var oInput = document.createElement('input');
				oInput.value = Url2;
				document.body.appendChild(oInput);
				oInput.select(); // 选择对象
				document.execCommand("Copy"); // 执行浏览器复制命令
				oInput.className = 'oInput';
				oInput.style.display = 'none';
				layer.msg('已复制成功！');
				break;
			}
		});

		//删除
		var tipDialog = function(ids) {
			layer.open({
				content : "确定要删除么?",
				yes : function(index, layero) {
					layer.close(index); //如果设定了yes回调，需进行手工关闭
					CoreUtil.sendDelete("/sysFiles/delete", ids, function(res) {
						layer.msg(res.msg, {
							time : 1000
						}, function() {
							search();
						});
					});
				}
			});
		};

		//返回
		$("#btn_cancel").click(function() {
			$(".table_div").show();
			$(".operation").hide();
			return false;
		});
	});

	//执行查询
	function search() {
		//这里以搜索为例
		tableIns1.reload({
			where : { //设定异步数据接口的额外参数，任意设
				key : $("#key").val()
			},
			page : {
				curr : 1
			//重新从第 1 页开始
			}
		});
	};
</script>